~function () {
    document.addEventListener('DOMContentLoaded', function () {
        let sass = require('sass');
        let styles = document.querySelectorAll('style[type=text\\/scss]');
    
        for(let i=0; i<styles.length; i++) {
            let scss = styles[i].innerHTML.trim();
            
            if(scss.length == 0) {
                continue;
            }
            
            let style = document.createElement('style');
            styles[i].setAttribute('compile-index', i);
            style.setAttribute('compile-index', i);
            style.setAttribute('type', 'text/css');
            style.innerHTML = sass.renderSync({data: scss}).css.toString();
            document.body.append(style);
        }
    });
    
    global.renderScss = function(scssContent) {
        scssContent = scssContent.trim().replace(/^<style\s*[^>]*>/i, '');
        scssContent = scssContent.replace(/<\/style>$/i, '').trim();
        let sass = require('sass');
        return sass.renderSync({data: scssContent}).css.toString();
    };
    
    global.renderScssWrite = function(scssContent) {
        let css = renderScss(scssContent);
        document.write(`<style type='text/css'>${css}</style>`);
    };
}();
